<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <link rel="stylesheet" href="../assets/css/index.css"/>
</head>
<body>
<h1>vue动画 vue-else-if</h1>
<hr>
<div id="app">
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>

    <transition name="fade">
        <p v-if="show">{{message}}</p>
    </transition>
    <button v-on:click="hidden">
        hidden
    </button>
</div>

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }

    .fade-enter, .fade-leave-active {
        opacity: 0;
    }
</style>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            type: 'A',
            message: 'hello vue',
            show: true
        },
        methods: {
            hidden: function () {
                this.show = false
                this.a++
            }
        }
    })
</script>
</body>
</html>